<template>
  <div class="gongshi">
    <el-form ref="form"
      :model="gongshiForm"
      label-width="120px"
      label-position="right"
      size="small">
      <el-form-item label="公示时间">
        <el-col :span="6">
          <el-date-picker
            v-model="gongshiForm.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="3">
          <el-button type="primary">生成公示模板</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary">生成公示报告</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="上传附件">
        <el-col :span="12">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="handleUploadSucc"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="false"
            :limit="100"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">每次只能选择一个文件</div>
          </el-upload>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认公示</el-button>
        <el-button type="primary" @click="handleReselect">重新选择</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'gongshi-step2',
  data () {
    return {
      gongshiForm: {
        date: ''
      },
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    handleUploadSucc (response, file, fileList) {
      console.log(response, file, fileList)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 100 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    onSubmit () {
      console.log('gongshi form submit')
    },
    handleReselect () {
      this.$emit('reSelect')
    }
  }
}
</script>

<style scoped>
.gongshi {
  width: 100%;
  margin-top: 10px;
}
</style>
